<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="__STATIC__/res/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 10px 30px 0 10px;">

    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">基本</li>
            <li>SEO</li>
            <li>高级</li>
            <li>属性</li>
            <li>介绍</li>
            <li>备注</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">父级栏目</label>
                    <div class="layui-input-block">
                        <input type="text" lay-verify="required" autocomplete="off" class="layui-input" value="{$parentCategoryTitle}" disabled>
                        <input type="hidden" name="pid" value="{$pid}"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">{if $pid eq 0}<span style="color: #FF5722">*</span>{/if} 模型</label>
                    <div class="layui-input-block">
                        {if $pid eq 0}
                        <select name="module_id" lay-verify="required" lay-reqtext="请选择模型" lay-search>
                            <option value="">请选择模型</option>
                            {if $modules neq null && count($modules) gt 0}
                            {foreach $modules as $item}
                            <option value="{$item.id}" {if $moduleId eq $item.id}selected="selected"{/if}>{$item.name}</option>
                            {/foreach}
                            {/if}
                        </select>
                        {else /}
                            <input type="text" autocomplete="off" class="layui-input" value="{$parentModuleName}" disabled readonly>
                            <input type="hidden" name="module_id"  value="{$moduleId}">
                        {/if}
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 栏目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" placeholder="请输入栏目名称" lay-reqtext="请输入栏目名称" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 英文名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="title_en" lay-verify="required" placeholder="请输入英文名称" lay-reqtext="请输入英文名称" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 自定义地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="seo_url" lay-verify="required" placeholder="请输入自定义地址" lay-reqtext="请输入自定义地址" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">栏目图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="image-upload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="image" id="image-url"/>
                    </div>
                </div>

                <div class="layui-form-item image-url">
                    <label class="layui-form-label">
                        <a href="javascript:;" title="点击删除">
                            <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
                        </a>
                    </label>
                    <div id="image-show"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" name="sort" placeholder="请输入排序" autocomplete="off" class="layui-input" value="100">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 状态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" checked lay-verify="required" lay-filter="status" name="status" lay-skin="switch" lay-text="启用|禁用" value="1">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 跳转子栏目</label>
                    <div class="layui-input-block">
                        <input type="radio" name="is_redirect_child" value="2" title="跳转">
                        <input type="radio" name="is_redirect_child" value="1" title="不跳转" checked>
                    </div>
                </div>

            </div>

            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">SEO标题 </label>
                    <div class="layui-input-block">
                        <textarea type="text" name="meta_title" placeholder="请输入SEO标题" autocomplete="off" style="height: 130px;" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">SEO关键词 </label>
                    <div class="layui-input-block">
                         <textarea type="text" name="meta_keyword" placeholder="请输入SEO关键词" autocomplete="off" style="height: 130px;" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">SEO描述 </label>
                    <div class="layui-input-block">
                        <textarea type="text" name="meta_description" placeholder="请输入SEO描述" autocomplete="off" style="height: 130px;" class="layui-textarea"></textarea>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 每页记录数</label>
                    <div class="layui-input-block">
                        <input type="text" name="page" lay-verify="required" placeholder="请输入每页记录数" lay-reqtext="请输入每页记录数" autocomplete="off" class="layui-input" value="{$parentPage}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="1" title="单页" {if $parentCategoryType eq 1} checked {/if}>
                        <input type="radio" name="type" value="2" title="封面" {if $parentCategoryType eq 2} checked {/if}>
                        <input type="radio" name="type" value="3" title="列表" {if $parentCategoryType eq 3} checked {/if}>
                        <input type="radio" name="type" value="4" title="跳转" {if $parentCategoryType eq 4} checked {/if}>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 打开方式</label>
                    <div class="layui-inline">
                        <input type="radio" name="target" value="1" title="当前" {if $parentTarget eq 1} checked {/if}>
                        <input type="radio" name="target" value="2" title="新窗口" {if $parentTarget eq 2} checked {/if}>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">跳转地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="go_url" placeholder="请输入跳转地址" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 控制器</label>
                    <div class="layui-input-block">
                        <input type="text" name="remark" lay-verify="required" placeholder="请输入控制器" lay-reqtext="请输入控制器" autocomplete="off" class="layui-input" value="{$parentRemark}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 封面</label>
                    <div class="layui-input-block">
                        <input type="text" name="default_tpl" lay-verify="required" placeholder="请输入封面页面模板" lay-reqtext="请输入封面页面模板" autocomplete="off" class="layui-input" value="{$parentDefaultTpl}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 列表</label>
                    <div class="layui-input-block">
                        <input type="text" name="list_tpl" lay-verify="required" placeholder="请输入列表页面模板" lay-reqtext="请输入列表页面模板" autocomplete="off" class="layui-input" value="{$parentListTpl}">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: #FF5722">*</span> 详细</label>
                    <div class="layui-input-block">
                        <input type="text" name="view_tpl" lay-verify="required" placeholder="请输入详细页面模板" lay-reqtext="请输入详细页面模板" autocomplete="off" class="layui-input" value="{$parentViewTpl}">
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                {if $parentAttributes!=null && count($parentAttributes)>0}
                {foreach $parentAttributes as $key => $attribute}
                <div class="layui-form-item attribute-item">
                    <label class="layui-form-label">
                        {if $key eq 0}
                        <span class="attribute-add">[ + ]</span>
                        {else/}
                        <span class="attribute-reduce">[ - ]</span>
                        {/if}
                        &nbsp;&nbsp;属性
                    </label>
                    <div class="layui-input-block">
                        <select name="attributes[]" lay-search>
                            <option value="">请选择属性</option>
                            {if $optionAttributes}
                            {foreach $optionAttributes as $option}
                            <option value="{$option.id}" {if $attribute.id eq $option.id} selected{/if}>{$option.name}</option>
                            {/foreach}
                            {/if}
                        </select>
                    </div>
                </div>
                {/foreach}
                {else /}
                <div class="layui-form-item attribute-item">
                    <label class="layui-form-label"><span class="attribute-add">[ + ]</span>&nbsp;&nbsp;属性 </label>
                    <div class="layui-input-block">
                        <select name="attributes[]" lay-search>
                            <option value="">请选择属性</option>
                            {if $optionAttributes}
                            {foreach $optionAttributes as $option}
                            <option value="{$option.id}">{$option.name}</option>
                            {/foreach}
                            {/if}
                        </select>
                    </div>
                </div>
                {/if}
            </div>

            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">介绍视频</label>
                    <div class="layui-input-block">
                        <input type="text" name="introduce_video_url" placeholder="请输入介绍视频" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">介绍图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="introduce-image-upload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="introduce_image" id="introduce-image-url"/>
                    </div>
                </div>

                <div class="layui-form-item introduce-image-url">
                    <label class="layui-form-label">
                        <a href="javascript:;" title="点击删除">
                            <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
                        </a>
                    </label>
                    <div id="introduce-image-show"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        介绍
                    </label>
                    <div class="layui-input-block">
                        <textarea type="text" name="introduce_content" id="introduce_content" style="height: 380px;"></textarea>
                    </div>
                </div>

            </div>

            <div class="layui-tab-item">
                <div class="layui-form-item">
                    <label class="layui-form-label">备注图片</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="note-image-upload">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="note_image" id="note-image-url"/>
                    </div>
                </div>

                <div class="layui-form-item note-image-url">
                    <label class="layui-form-label">
                        <a href="javascript:;" title="点击删除">
                            <i class="layui-icon layui-icon-delete" style="font-size:30px;color: #1E9FFF;display: none"></i>
                        </a>
                    </label>
                    <div id="note-image-show"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                       备注
                    </label>
                    <div class="layui-input-block">
                        <textarea type="text" name="note" id="note" style="height: 450px;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" name="website_code" value="{$websiteCode}" />
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>
</div>

<script>
    var CATEGORY_DO_ADD_URL='{:url("category/doAdd")}';
</script>
<script src="__STATIC__/res/layui/layui.js"></script>
<script charset="utf-8" src="__STATIC__/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="__STATIC__/kindeditor/lang/zh-CN.js"></script>
<script>
    layui.config({
        base: '__STATIC__/res/' //静态资源所在路径
    }).use(['index','upload', 'form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,upload = layui.upload;

        //监听提交
        form.on('submit(layuiadmin-app-form-submit)', function(data){
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                method: 'post',
                data: field,
                url: CATEGORY_DO_ADD_URL,
                success: function (res) {
                    if (res.result.status) {
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        return;
                    }
                    parent.layui.table.reload('LAY-app-content-list'); //重载表格
                    parent.layer.close(index); //再执行关闭
                }
            });
        });

        // 图片上传
        uploadImage('image','{:url("ad/upload",["website_code"=>$websiteCode])}')
        uploadImage('introduce-image','{:url("ad/upload",["website_code"=>$websiteCode])}')
        uploadImage('note-image','{:url("ad/upload",["website_code"=>$websiteCode])}')
        function uploadImage(fieldName,uploadUrl){
            var uploadInst = upload.render({
                elem: '#'+fieldName+'-upload'
                ,url: uploadUrl
                , before: function(){
                    layer.load();
                }
                ,done: function(res){
                    if(res.result.status){
                        layer.msg(res.result.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        });
                        layer.closeAll('loading');
                        return ;
                    }

                    //上传完毕回调
                    $('#'+fieldName+'-show').html("<img src='" + res.result.data.fullPath + "' style='width:300px'>")
                    $('#'+fieldName+'-url').val(res.result.data.path)
                    $('.'+fieldName+'-url i').show()
                    layer.closeAll('loading');
                }
                ,error: function(){
                    //请求异常回调
                    layer.closeAll('loading');
                }
            });

            $('.'+fieldName+'-url').on('click','i',function(){
                $(this).hide()
                $(this).parents('.layui-form-item').find('#'+fieldName+'-show img').remove();
                $(this).parents('.layui-form-item').prev('.layui-form-item').find('#'+fieldName+'-url').val('')
            })
        }

        // 属性
        $('.attribute-add').on('click',function(){
            var attributeItem =  $(this).parents('.attribute-item').clone();
            attributeItem.find('.attribute-add').removeClass('attribute-add').addClass('attribute-reduce').html('[ - ]');
            attributeItem.appendTo($(this).parents('.layui-tab-item'));
            form.render()
        })

        $('.layui-tab-item').on('click','.attribute-reduce',function (){
            $(this).parents('.attribute-item').remove();
        })


    })

    var UPLOAD_URL = '{:url("category/kindEditorUpload",["website_code"=>$websiteCode])}';
    // 富文本编辑器
    var FUNCTIONS  = [
        'source', '|',  'preview','code',  'paste',
        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent',  'clearhtml', 'quickformat', '|', 'fullscreen', '/',
        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr','link', 'unlink'
    ];
    var fields =['introduce_content','note'];
    fields.forEach(field => {
        KindEditor.ready(function(K) {
            K.create('#'+field, {
                    //filterMode:false, // 标签过滤
                    width:'100%',height:'380px',
                    uploadJson:UPLOAD_URL,
                    items:FUNCTIONS,
                    afterBlur: function(){ this.sync();},
                    cssData:'.ke-content table td,.ke-content table th {border:1px dashed #ccc;padding-left:5px} .ke-content table{width:100%}'
                }
            );
        });
    })
</script>
</body>
</html>